import styled from '@emotion/styled';
import React from 'react';
import './styles/customer_information.less';
import { Image } from 'antd';
import { useTranslation } from 'react-i18next';

export interface IUserData {
	callMediaType?: 'video' | 'audio';
	customerRole?: string;
	formId?: number;
	fullName?: string;
	gender?: string;
	homeAddress?: string;
	idCard?: string;
	isScreenSyncMode?: boolean;
	name?: string;
	phoneNumber?: string;
	receiveMediaType?: 'video' | 'audio' | 'im';
	service?: string | number;
	specifyAgent?: string | number | null;
	ua?: any;
	userId?: string | number;
	userName?: string;
	ID?: string;
	mobile?: string;
	frontPhoto?: string;
	backPhoto?: string;
	bankCardPhoto?: string;
	selfie?: string;
	address?: string;
	company?: string;
}

const ImageBox = styled.div`
	display: flex;
	flex-wrap: wrap;
	padding: 0 14px;
	justify-content: space-between;
`;

const ImageText = styled.p`
	font-size: 12px;
	color: #303030;
`;

const ImageItemDiv = styled.div`
	text-align: center;
`;

const UserInfoBox = styled.div`
	/* max-height: 166px; */
	/* overflow: auto; */
`;

const ImageUrl = styled(Image)`
	 .ant-image-mask {
		pointer-events: none;
	}
`;

export const UserInfo = (props: IUserData) => {
	const { company = '', address, name, ID, mobile, frontPhoto, backPhoto, bankCardPhoto, selfie } = props;
	const { t } = useTranslation();
	return (
		<UserInfoBox>
			<ul className="widget-customer-information-ul">
				<li>
					<span>{t('user-information-name')}：</span>
					<span>{name ? name : '--'}</span>
				</li>

				<li>
					<span>{t('user-information-idCard')}：</span>
					<span>{ID ? ID : '--'}</span>
				</li>
				<li>
					<span>{t('user-information-mobile')}：</span>
					<span>{mobile ? mobile : '--'}</span>
				</li>
				<li>
					<span>{t('user-information-Address')}：</span>
					<span>{address ? address : '--'}</span>
				</li>
				<li>
					<span>{t('user-information-corporate-name')}：</span>
					<span>{company ? company : '--'}</span>
				</li>
			</ul>
			{frontPhoto && backPhoto && bankCardPhoto && selfie ? (
				<ImageBox>
					<ImageItemDiv>
						<ImageUrl width={136} height={70} src={frontPhoto} />
						<ImageText>{t('user-information-idCard-front-photo')}</ImageText>
					</ImageItemDiv>
					<ImageItemDiv>
						<ImageUrl width={136} height={70} src={backPhoto} />
						<ImageText>{t('user-information-idCard-back-photo')}</ImageText>
					</ImageItemDiv>
					<ImageItemDiv>
						<ImageUrl width={136} height={70} src={bankCardPhoto} />
						<ImageText>{t('user-information-bankCard-photo')}</ImageText>
					</ImageItemDiv>
					<ImageItemDiv>
						<ImageUrl width={136} height={70} src={selfie} />
						<ImageText>{t('user-information-selfie')}</ImageText>
					</ImageItemDiv>
				</ImageBox>
			) : null}
		</UserInfoBox>
	);
};

export default UserInfo;
